<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('测评')"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <style type="text/css">
        input[type="radio"] {
            display: none;
        }

        input[type="radio"] + span {
            display: inline-block;
            width: 300px;
            height: 32px;
            font-size: 16px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #eee;
            background-color: #fff;
            border-radius: 6px;
            margin: 4px;
        }

        input[type="radio"]:checked + span {
            color: #fff;
            border: 1px solid #18a689 !important;
            background: linear-gradient(87deg,#18a689,#34C5B2) !important;
        }
        .panel-title h4{
            font-size: 22px;
            color: #5e72e4 !important;
            font-weight: 300 !important;
        }
        .box-pan{
            background: #fff !important;
            padding-bottom: 20px;
        }
        .box-menu.nav>li>a{
            font-weight: normal;
            color: #666 !important;
            font-size: 16px !important;
        }
        .box-menu.nav>li.active a{ color: #0d8ddb  !important;}
        .box-tab.nav{ border: none !important; text-align: center;}
        .box-tab.nav>li{
            float: none !important;
            clear: both;
            display: inline-block;
            background-color:#fdfdfd;
            border: 1px solid #fcfcfc !important;
            font-weight: normal;
            margin: 4px 8px;
        }
        .box-tab.nav>li>a{
            /*background-color:#676a6c;*/
            font-weight: normal;
            font-size: 16px !important;
        }
        .box-tab.nav>li>a:hover{
            border: none;
            color: #0d8ddb;
            border-color: #34C5B2;
            font-weight: normal;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important;
        }
        .box-tab.nav>li>a.on{
            border: none;
            color: #2A2E36;
            border-color: #34C5B2;
            font-weight: normal;
            background: #ccc;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.08),0 1px 2px 0 rgba(0,0,0,.1)!important;
        }
        .box-tab.nav>li>a i{ display: inline-block; font-style: normal;}

        .box-tab.nav>li.active{
            background:#34C5B2 !important;
            border: 1px solid #5e72e4 !important;
            border-radius:6px;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important;
        }
        .box-tab.nav>li.active.on{
            background:#ddd !important;
        }
        .text{
            text-align: center;font-size:20px; line-height: 40px;
        }
        .btns{
            text-align: center; padding-top: 12px;
        }
        .btns .btn{padding:16px 40px;}
        .btns .btn:active:hover,.btns .btn:focus{
            outline: none;
            background: linear-gradient(87deg,#18a689,#34C5B2) !important;
            border-color: #18a689 !important;
            box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px 0 rgba(0,0,0,.06)!important;
        }
        .hover-box{
            position: relative;
        }
        .hover-box label{position: relative;z-index: 1}
        .hover-box .hover-btn{
            display: none;
            width: 308px;
            padding: 20px;
            position: absolute;
            top:-16px;
            right:50%;
            margin-right:160px;
            background: #0a2730;
            color: #fff;
            opacity: .8;
            z-index: 2;
            border-radius: 6px;
        }
        .hover-box .hover-btn:before{
            display: block;
            width: 6px;
            height: 6px;
            content: " ";
            border-bottom:3px solid transparent;
            border-top:3px solid transparent;
            border-left:5px solid #0a2730;
            opacity: .8;
            position: absolute;
            top:48%;
            left:100%;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">

        <div class="col-sm-12">
            <div class="panel blank-panel box-pan" >

                <form class="form-horizontal" id="form-child-question">
                    <input name="childId" type="hidden" th:value="${childId}"/>
                    <input name="evaluateNumber" id="evaluateNumber" type="hidden" th:value="${evaluateNumber}"/>

                    <div class="panel-heading">
                        <div class="panel-options">
                            <ul class="nav nav-tabs nav-justified box-menu" id="box-menu">
                                <li  th:each="dict : ${@dict.getType('business_project_module')}" th:class="${dict.dictValue == 1 ? 'active' : ''}" ><a
                                        data-toggle="tab" th:onclick="changeModuleClass([[${dict.dictValue}]])"
                                        th:id="'tab-menu-' + ${dict.dictValue}" ><span>[[${dict.dictLabel}]]</span></a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="panel-body">
                        <div class="tab-content mainbox" th:each="module : ${@dict.getType('business_project_module')}">
                            <div th:id="'tab-module-' + ${module.dictValue}" class="tab-pane mod">
                                <div>

                                    <div class="panel-options">
                                        <ul class="nav nav-pills box-tab">
                                            <li class="" th:if="${module.dictValue} == ${questionSort.projectModule}" th:each="questionSort : ${childQuestion}" th:name="${questionSort.questionSort}"  th:id="'tab-q-' + ${questionSort.id}">
                                                <a data-toggle="tab"
                                                   th:onclick="changeQuestionClass([[${module.dictValue}]],[[${questionSort.id}]])"
                                                  ><span>[[${questionSort.questionSort}]]</span></a>
                                            </li>
                                        </ul>
                                    </div>


                                </div>
                                <div style="text-align: center" class="panel-body">
                                    <div class="tab-content boxss" th:each="question : ${childQuestion}"  th:if="${question.projectModule} eq ${module.dictValue}">

                                        <div class="tab-pane" th:name="${question.questionSort}" th:id="'tab-question-' +${module.dictValue}+ ${question.id}">
                                            <div class="text">[[${question.questionSort}]]、[[${question.question}]]</div>
                                            <div th:each="answer : ${question.answer}" class="hover-box">
                                                <label><input type="radio" th:name="${question.id}" th:value="${answer.score}" th:checked="${answer.checked}" ><span>[[${answer.content}]]</span></label>
                                                <div class="hover-btn">[[${answer.remark}]]</div>
                                            </div>
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>


                </form>
                <div class="row">
                    <div class="col-sm-12 btns">
                        <button type="button" class="btn btn-sm" onclick="preQ()">上一题
                        </button>&nbsp;
                        <button type="button" class="btn btn-sm" onclick="nextQ()">下一题
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 btns">
                        <button type="button" class="btn btn-lg btn-primary" onclick="submitHandler()"><i
                                class="fa fa-check"></i>保 存
                        </button>&nbsp;
                        <button type="button" class="btn btn-lg btn-danger" onclick="closeItem()"><i
                                class="fa fa-reply-all"></i>关 闭
                        </button>
                    </div>
                </div>

            </div>
        </div>

    </div>

</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    //默认显示第一个
    $("#box-menu").children(":first-child").addClass('active');
    $(".mainbox:first-child .mod").addClass('active');
    if($("[id^='tab-module']").find('[id*="tab-q-"]').hasClass('active')){

        $(".box-tab li:first-child").removeClass('active');
    }else{
        $(".box-tab li:first-child").addClass('active');

    }

    $(".active").find(".boxss:first-child .tab-pane").addClass('active');

    $(".hover-box").hover(function(){
        $(this).find('.hover-btn').show();
    },function(){
        $(this).find('.hover-btn').hide();
    })

    //获取当前哪个
    var inId=$('.mod.active').find(".active[id^='tab-q-']").attr('id');
    var len=$('.mod.active').find(".box-tab li").length;
    console.log("len===",len)
    var arr =inId.split('-');
    var m=arr[2];
    //判断点击过的
    $("input:radio:checked").addClass('checked');
    $(".tab-pane.active").find(".hover-box").on("click",function (){
        $(this).find("input:radio").addClass('checked');
        $(this).siblings('.hover-box').find("input:radio").removeClass('checked');
    });
    fy();

    var prefix = ctx + "business/childQuestion";

    var index=1;
    var tabIndex =1;

    function submitHandler() {
        if ($.validate.form()) {
            debugger
            // var serializeObj = new FormData();
            var obj ={};
            var data = $("#form-child-question").serializeArray();
            var questionAnswerList = [];
            for (var i = 0; i < data.length; i++) {
                if (i == 0) {
                    obj.childId = data[0].value;
                } else {
                    questionAnswerList.push({"questionId": data[i].name, "answerSore" : data[i].value});
                    // questionAnswerList.splice(0,1);
                }
            }
            console.log("evaluateNumber===",document.getElementById("evaluateNumber").value);
            obj.evaluateNumber = document.getElementById("evaluateNumber").value;
            obj.list = questionAnswerList;
            obj.selectCenterId = localStorage.getItem('selectCenterId');
            saveTab( ctx + "business/childRecord/saveChildRecord", obj);

        }
    }

    // 保存选项卡信息
    function saveTab(url, data, callback) {
        var config = {
            url: url,
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(data),
            beforeSend: function () {
                $.modal.loading("正在处理中，请稍后...");
            },
            success: function(result) {
                $.modal.closeLoading();
                if (result.code == 0 ){
                    $('#evaluateNumber').val(result.msg);
                    $.modal.msgSuccess('测评保存成功');
                }else{
                    $.modal.alertError(result.msg);
                }
            }
        };
        $.ajax(config)
    }

    function changeModuleClass(moduleId) {

        tabIndex = moduleId;
        $("[id^='tab-module']").removeClass('active');
        $('#tab-module-' + moduleId).addClass('active');
        console.log("moduleId===",moduleId);
        //改变个数
        len=$('#tab-module-' + moduleId).find(".box-tab li").length;
        console.log("len===",len)

        m=1;
        fy();
        //判断已经点击过得
        if($('#tab-module-' + moduleId).find('.box-tab li:first-child').hasClass('active')){

            $('#tab-module-' + moduleId).find(".boxss:first-child .tab-pane").addClass('active');
        }else if($('#tab-module-' + moduleId).find('li').hasClass('active')){
            var val=$('#tab-module-' + moduleId).find('li.active').attr("id");
            console.log("val",val)
            var txt = val.split('-');
            console.log("txt",txt[2],"====",moduleId+txt[2]);
            $("[id$="+moduleId+txt[2]+"]").addClass('active');
            $("[id$="+moduleId+txt[2]+"]").siblings("li").removeClass('active');
            $('#tab-module-' + moduleId).find(".boxss:first-child .tab-pane").removeClass('active');
            m=Number($('#tab-module-' + moduleId).find('li.active').attr("name"));
        }else{
            console.log("fffff============")
            $('#tab-module-' + moduleId).find('.box-tab li:first-child').addClass('active');
            $('#tab-module-' + moduleId).find(".boxss:first-child .tab-pane").addClass('active');
        }
        $(".tab-pane.active").find(".hover-box").on("click",function (){
            $(this).find("input:radio").addClass('checked');
            $(this).siblings('.hover-box').find("input:radio").removeClass('checked');
        });

        var temp = $('#tab-module-' + moduleId).find('.box-tab li.active').attr("id");
        index =temp.replace('tab-q-','');

    }

    // function changeQuestionNoClass(moduleId) {
    //     $("[id^='tab-question']").removeClass('active');
    //     $('#tab-question-' + moduleId).addClass('active');
    //     // $('#tab-question-' + moduleId).attr( 'class', 'tab-pane active' );
    // }

    function changeQuestionClass(i,questionNo) {
        tabIndex = i;
        console.log("oo====",i+"===",questionNo)
        $("[id^='tab-question']").removeClass('active');
        $('#tab-question-' +i+questionNo).addClass('active');

        //判断是否点击
        fy();
        // var c=$('.mod.active').find('input');
        // if(c.hasClass("checked")){
        //     console.log("ccccccccc===",$(".checked").length)
        //     var box=$('.mod.active').find('.checked');
        //     for(var i=0;i< box.length;i++){
        //
        //         var g=$('.mod.active').find('.checked').eq(i).attr('name');
        //         console.log("ggggg=",g)
        //         $(".mod.active").find("li[id='tab-q-"+g+"'] a").addClass('on');
        //     }
        // }
        m=Number($('#tab-question-' +i+questionNo).attr('name'));
        index = questionNo;
    }
    function fy(){
        var c=$('.mod.active').find('input');
        if(c.hasClass("checked")){
            // console.log("ccccccccc===",$(".checked").length)
            var box=$('.mod.active').find('.checked');
            for(var i=0;i< box.length;i++){

                var g=$('.mod.active').find('.checked').eq(i).attr('name');
                console.log("ggggg=",g)
                $(".mod.active").find("li[id='tab-q-"+g+"'] a").addClass('on');
            }
        }
    }
    function preQ(){
        console.log("0000-preQ--")
        $("[id^='tab-q']").removeClass('active');
        $("[id^='tab-question']").removeClass('active');
        m--;
        if(m<1){
            // m=len;
            m=1;
            $.modal.msgSuccess('当前是第一题！');

        }
        var t=Number(m);//parseInt

        $('.mod.active').find("[id^='tab-q-'][name='"+t+"']").addClass('active');
        $('.mod.active').find("[id^='tab-question'][name='"+t+"']").addClass('active');
        index --;
        fy();
    }
    function nextQ(){
        var c1= $(".tab-pane.active").find('input[name='+m+']');
        var c = $("#tab-question-"+tabIndex+index).find('input[name='+index+']');
        if(c.hasClass("checked")){
            console.log("已做题")
        }else {
            $.modal.msg('至少选择一项！');
            return;
        }
        console.log(len,"0000-nextQ--",m)
        $("[id^='tab-q']").removeClass('active');
        $("[id^='tab-question']").removeClass('active');

        m++;
        if(m>len){
            // m=1;
            m=len;
            $.modal.msgSuccess('当前已经是最后一题！');

        }
        var t=Number(m);//parseInt
        console.log("dddddddddd",t)
        $('.mod.active').find("[id^='tab-q-'][name='"+t+"']").addClass('active');
        $('.mod.active').find("[id^='tab-question'][name='"+t+"']").addClass('active');
        index ++;

        fy();
    }

</script>

</body>

</html>
